@charset "utf-8";


//轮播图
.carou{
    width: 100%;
    .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
        cursor: pointer;
    }
    .gallery-top {
        height: 470px;
        width: 100%;
    }
    .gallery-thumbs {
        height: 102px;
        width: 996px;
        box-sizing: border-box;
        padding: 5px 0;
    }
    .gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
}


//内容

.index-content{
    width: 100%;
}
    //产品介绍
    .index-productrecommend{
        height: 507px;
        width: 1000px;
        margin: 0 auto;
    }
    .index-bigpic{
        height: 130px;
        width: 100%;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        img{
            width: 100%;
        }
    }
    .index-bigpic::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.2);
    }
    .index-bigpic:hover::after{
        content: "";
    }
    .index-title{
        font-family: "宋体";
        font-size: 20px;
        line-height: 20px;
        padding-top: 70px;
        padding-bottom: 50px;
        text-align: center;
        
        span{
            color: #444f58;
             position: relative;
             transition: 0.3s;
        }
        span:hover{
            color: red;
        }
        span:hover::after{
            transform: scaleX(4);
        }
        span::after{
        position: absolute;   
        content: "";
        width: 25px;
        height: 3px;
        background: #eb413d;
        top: 30px;
        left: 50%;
        margin-left: -12px;
        transition: 0.3s;
    }
        
    }
       
    .index-productrecommend-content{
        width: 100%;
        height: 373px;
    }
    
    .swiper-container1{
        width: 800px;
        height: 373px;
    }
    .swiper-button-prev1{
//      position: absolute;
        
    }
    .swiper-button-next1{
//      position: absolute;
        
    }
    #swiper-slide1 {
        width: 190px;
        text-align: center;
        /*font-size: 18px;*/
        /*background: #fff;*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .recommendstyle{
        height: 315px;
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        .recommendpic{
            height: 230px;
            width: 190px;
            margin-bottom: 20px;
            img{
                width: 100%;
            }
        }
        p:first-child{
            font-family: "宋体";
            color: #505b63;
        }
        p~p{
            margin-top: 12px;
            font-family: "宋体";
            color: #99999a;
        }
    }
    
    //定制骑行服
    .index-DIYapparel{
        height: 593px;
        width: 1000px;
        margin: 0 auto;
        .index-DIYapparel-content{
            height: 452px;
            width: 100%;
        }
        .index-DIYapparel-left{
            width: 400px;
            height: 452px;
        }
        .index-DIYapparel-right{
            width: 600px;
            height: 452px;
        }
    }
    #index-DTYapparel{
        width: 197px;
        p{
            top: 30px;
        }
        div{
            top: 74px;
        }
    }
    
    
    //定制跑步服
    .index-DIYrunner{
        width: 1000px;
        margin: 0 auto;
        .index-DIYrunner-content{
            width: 1000px;
            height: 225px;
        }
        .index-DIYrunner-left{
           height: 225px;
            width: 400px;
        }
        .index-DIYrunner-right{
            width: 600px;
            height: 225px;
        }
    }
    #index-DTYrunner{
        width: 197px;
        p{
            top:30px;
            color: #414449;
        }
        div{
            top: 74px;
        }
    }
    #index-DTYrunner:first-child{
        div li{
            background: rgba(170,216,222,0.6);
        }
    }
    #index-DTYrunner:nth-child(2){
        div li{
            background: rgba(231,197,191,0.6);
        }
    }
    
    //定制铁三服
    .index-DIYtiesan{
        width: 1000px;
        margin: 0 auto;
        .index-DIYtiesan-content{
            width: 1000px;
            height: 225px;
        }
        .index-DIYtiesan-left{
           height: 225px;
            width: 400px;
        }
        .index-DIYtiesan-right{
            width: 600px;
            height: 225px;
        }
    }
    #index-DTYtiesan{
        width: 197px;
        p{
            top: 30px;
            color: #414449;
        }
        div{
            top: 74px;
        }
    }
    #index-DTYtiesan:first-child{
        div li{
            background: rgba(231,197,191,0.6);
            
        }
    }
    #index-DTYtiesan:nth-child(2){
        p{
            top: 30px;
            color: #FFFFFF;
        }
        div li{
            background: rgba(170,216,222,0.6);
        }
    }
    
    //定制休闲服
    
    .index-DIYcasual{
        width: 1000px;
        margin: 0 auto;
        .index-DIYcasual-content{
            width: 1000px;
            height: 383px;
            .index-DIYcasual-content-pic1{
                height: 383px;
                width: 250px;
                overflow: hidden;
                position: relative;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
                input{
                    position: absolute;
                    box-sizing: border-box;
                    width: 130px;
                    height: 40px;
                    border: #313131 1px solid;
                    background: transparent;
                    font-size: 8px;
                    top: 290px;
                    left: 58px;
                }
            }
            .index-DIYcasual-content-pic2{
                height: 191px;
                width: 250px;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .index-DIYcasual-content-pic3{
                height: 192px;
                width: 250px;
                overflow: hidden;
                position: relative;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
                input{
                    position: absolute;
                    box-sizing: border-box;
                    width: 130px;
                    height: 40px;
                    border: #FFFFFF 1px solid;
                    background: transparent;
                    font-size: 8px;
                    top: 99px;
                    left: 67px;
                    color: #FFFFFF;
                }
            }
        }
    }
    
    //品牌专区
    .index-brand{
        width: 1000px;
        margin: 0 auto 103px;
        table{
            box-sizing: border-box;
             height: 335px;
             width: 1000px;
             border: 1px solid #dee0e2;
             .index-brand-pic1{
                 height: 333px;
                 width: 332px;
                 position: relative;
                 img{
                     width: 100%;
                     height: 100%;
                     position: absolute;
                 }
                 .index-brand-text{
                     position: absolute;
                     box-sizing: border-box;
                     padding-top: 100px;
                     padding-left: 25px;
                     padding-right: 25px;
                     width: 332px;
                     height: 333px;
                     text-align: justify;
                     background: rgba(0,0,0,0.7);
                     display: none;
                     transition: 1s;
                    .index-brand-text-pic{
                        position: absolute;
                        width: 70px;
                        height: 69px;
                        top: -1px;
                        left: 28px;
                        img{
                            width: 100%;
                        }
                        
                    }
                    p{
                        font-family: "宋体";
                        font-size: 14px;
                        line-height: 21px;
                        color: #FFFFFF;
                    }
                    input{
                        width: 76px;
                        height: 20px;
                        background: #eb413d;
                        border-radius: 10px;
                        font-size: 11.5px;
                        font-family: "宋体";
                        color: #fef2f2;
                        margin-top: 35px;
                    }
                 }
                 
             }
             .index-brand-pic1:hover .index-brand-text{
                   
                    display: block;
                    animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both;
              }
             .index-brand-pic2{
                 height: 164px;
                 width: 330px;
                 border-bottom: 1px solid #dee0e2;
                 border-left: 1px solid #dee0e2;
                 
                 img{
                     width: 100%;
                     height: 100%;
                }
            }
            .index-brand-pic2:hover{
                 animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both;
            }
            #index-brand-pic2{
                border-bottom: none;
            }
            
        }
    }

@keyframes slide-bottom{
    0%{
        transform:translateY(-100px);
    }
    100%{
        transform:translateY(0px);
    }
}

@keyframes shadow-drop-2-center{
    0%{
        transform:translateZ(0);
        box-shadow:0 0 0 0 transparent;
    }
    100%{
        transform:translateZ(50px);
        box-shadow:0 0 20px 0 rgba(0,0,0,.35);
    }
}
